<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>

        p[class] {
            font-size: 30px;
            color: blue;
        }

        p[id] {
            font-size: 20px;
            color: red;
        }

        /*
        功能:
            属性选择器的作用.
        说明:
            1. 属性选择器可以元素的属性进行选择, 每一个属性用一个[]包起来.
            2. 多个属性选择器选择上同一个元素时, 后选择的优先级高.
            3. 如果有多个属性选择, 则元素必须具有罗列出的所有属性才能选择上.
            4. 由于属性选择器从整个页面进行检索, 所以感觉上并不是很好用.
                - 因为选择范围不可控制.
        */
        p[id][class] {
            font-size: 40px;
            color: yellow;
        }

        /*
        功能:
            设置页面上所有href属性值为https://www.baidu.com的a标签的样式.
        */
        a[href='https://www.baidu.com'] {
            color: red;
        }

        /*
        功能:
            这种情况适用于当一个元素具有多个class值, 只要其中的一个值满足其中的要求, 就进行设置样式, 相当于是mysql中的like模糊匹配.
        */
        h1[class~='h1-1'] {
            color: yellow;
        }
        h1[class~='h1-2'] {
            font-size: 20px;
        }
        h1[class~='h1-3'] {
            border: 1px solid black;
        }

        /*
        功能:
            [class^='h1-4']: 设置class属性值是以h1-4开头的元素的样式.
            [class$='h1-5']: 设置class属性值是以h1-4结尾的元素的样式.
        */
        h1[class^='h1-4'] {
            color: #00b0ff;
        }
        h1[class$='h1-5'] {
            border: 1px solid black;
        }



    </style>
</head>
<body>
<p class="p-1">第一个p</p>
<p id="pp">第二个p</p>
<p id="pp-1" class="p-2">第三个p</p>
<hr/>

<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.w3cschool.cn">百度一下</a>

<hr />
<h1 class="h1-1 h1-2">h1内容1</h1>
<h1 class="h1-2 h1-3">h1内容2</h1>
<h1 class="h1-4 h1-5">h1内容3</h1>

</body>
</html>